<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <!--     1，显示鼠标移动轨迹 -->

    <script>
        // onmousemove 事件当指针在元素上移动时发生 。
        window.onmousemove = function (event) {
            // 创建一个div
            var divDom = document.createElement('div');
            // 获取事件（兼容性）
            var e = event || window.event;
            // 给div添加样式
            divDom.style.cssText = " position:absolute;width:20px;height:20px;background-color:pink;background: url(../pc端作业/images/d1.png)" ;
            // 获取水平坐标
            divDom.style.left = e.pageX + "px";
            // 获取垂直坐标
            divDom.style.top = e.pageY + "px";
            // 把创建好的div放在body中
            // appendChild() 方法向节点添加最后一个子节点
            document.body.appendChild(divDom);
            setInterval(function () {
                divDom.remove()
            }, 1000)
        }

    </script>

</body>

</html>